<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>uimaker信息管理系统</title> 
    <link href="${pageContext.request.contextPath}/static/css/base.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/login/login.css" rel="stylesheet">
	<script>
		if(window != top){
			//处理session失效 跳转到顶级页面
			top.location.href = location.href;
		}
	</script>
</head> 
<body>
	<div class="login-hd">
		<div class="left-bg"></div>
		<div class="right-bg"></div>
		<div class="hd-inner">
			<span class="logo"></span>
			<span class="split"></span>
			<span class="sys-name">采购协同平台</span>
		</div>
	</div>
	<div class="login-bd">
		<div class="bd-inner">
			<div class="inner-wrap">
				<div class="lg-zone">
					<div class="lg-box">
						<div class="lg-label"><h4>登录</h4></div>
						<div class="alert alert-error" style="display: ${not empty error ? 'block' : 'none'};">
			              <i class="iconfont">&#xe62e;</i>
			              <span>${error}</span>
			            </div>
						<form id="form0" method="post" style="display: none;" action="${pageContext.request.contextPath}/login">
							<div class="lg-username input-item clearfix">
								<i class="iconfont">&#xe60d;</i>
								<input type="text" name="username" placeholder="请输入用户名">
							</div>
							<div class="lg-password input-item clearfix">
								<i class="iconfont">&#xe634;</i>
								<input type="text" name="password" placeholder="请输入密码">
							</div>
							<div class="lg-check clearfix">
								<div class="input-item">
									<i class="iconfont">&#xe633;</i>
									<input type="text" name="code" placeholder="验证码">
								</div>
								<span class="check-code">
									<img onclick="this.src=this.src+'?'+new Date().getTime()" alt="" src="${pageContext.request.contextPath}/captcha/getCode">
								</span>
							</div>
							<div class="tips clearfix">
								<label><input type="checkbox" name="rememberMe" value="true" checked="checked">记住我</label>
								<a class="register to-mobile">切换成手机号验证码登陆</a>
								<a class="forget-pwd"></a>
							</div>
							<div class="enter" style="text-align: center;">
								<a class="supplier username-login">登录</a>
							</div>
						</form>
						<form id="form1" method="post" action="${pageContext.request.contextPath}/mobilelogin">
							<div class="lg-username input-item clearfix">
								<i class="iconfont">&#xe60d;</i>
								<input type="text" name="mobile" placeholder="请输入手机号">
							</div>
							<div class="lg-check clearfix">
								<div class="input-item">
									<i class="iconfont">&#xe633;</i>
									<input type="text" name="yzm" placeholder="验证码">
								</div>
								<span class="check-code">
									<a id="send-code-btn">发送验证码</a>
								</span>
							</div>
							<div class="tips clearfix">
								<label></label>
								<a class="register to-username">切换成用户名密码登陆</a>
								<a class="forget-pwd"></a>
							</div>
							<div class="enter" style="text-align: center;">
								<a class="supplier mobile-login">登录</a>
							</div>
						</form>
					</div>
				</div>
				<div class="lg-poster"></div>
			</div>
		</div>
	</div>
	<div class="login-ft">
		<div class="ft-inner">
			<div class="about-us">
				<a href="javascript:;">关于我们</a>
				<a href="javascript:;">法律声明</a>
				<a href="javascript:;">服务条款</a>
				<a href="javascript:;">联系方式</a>
			</div>
			<div class="address">地址：江苏省南京市雨花台区软件园&nbsp;邮编：210019&nbsp;&nbsp;Copyright&nbsp;©&nbsp;2015&nbsp;-&nbsp;2016&nbsp;uimaker-专注于ui设计&nbsp;版权所有</div>
			<div class="other-info">建议使用IE8及以上版本浏览器&nbsp;苏ICP备&nbsp;09003078号&nbsp;E-mail：admin@uimaker.com</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('.mobile-login').on('click', function() {
			var $mobile = $('[name="mobile"]');
			var mobileVal = $mobile.val();
			if ($.trim(mobileVal) === '') {
				// 提示用户名不能为空
				$('.alert-error span').text('手机号不能为空');
				$('.alert-error').show();
				return;
			}
			var $yzm = $('[name="yzm"]');
			var yzmVal = $yzm.val();
			if ($.trim(yzmVal) === '') {
				// 提示用户名不能为空
				$('.alert-error span').text('验证码不能为空');
				$('.alert-error').show();
				return;
			}
			$('.alert-error').hide();
			$('#form1').submit();
		});
		
		$('.username-login').on('click', function() {
			var $username = $('[name="username"]');
			var usernameVal = $username.val();
			if ($.trim(usernameVal) === '') {
				// 提示用户名不能为空
				$('.alert-error span').text('用户名不能为空');
				$('.alert-error').show();
				return;
			}
			var $password = $('[name="password"]');
			var passwordVal = $password.val();
			if ($.trim(passwordVal) === '') {
				// 提示用户名不能为空
				$('.alert-error span').text('密码不能为空');
				$('.alert-error').show();
				return;
			}
			var $code = $('[name="code"]');
			var codeVal = $code.val();
			if ($.trim(codeVal) === '') {
				$('.alert-error span').text('验证码不能为空');
				$('.alert-error').show();
				return;
			}
			$('.alert-error').hide();
			$('#form0').submit();
		});
		
		$('.to-mobile').on('click', function() {
			$('#form0').hide();
			$('#form1').show();
		});
		
		$('.to-username').on('click', function() {
			$('#form1').hide();
			$('#form0').show();
		});
		
		$('#send-code-btn').on('click', function() {
			// 1. 校验一个输入的手机号是否是一个合法手机号码
			$('.alert-error').hide();
			var $mobile = $('[name="mobile"]');
			var mobileValue = $.trim($mobile.val());
			if (/^1[3-8][0-9]{9}$/i.test(mobileValue)) {
				// 可以发送验证码了
				$.post('${pageContext.request.contextPath}/sendcode', {
					'mobile': mobileValue
				}, function(data) {
					if (data.success === 'true') {
						alert('发送成功');
					} else {
						alert('发送失败');
					}
				}, 'json');
			} else {
				$('.alert-error span').text('请输入正确的手机号');
				$('.alert-error').show();
			}
		});
	});
</script>
</html>    